<template>
  <div class="dynamic-range-panel">
    <div class="left">
      <div class="header-title">开始日期</div>
      <div class="header-btns">
        <el-row :gutter="8">
          <el-col :span="12">
            <el-button
              :type="startType === 'precision' ? 'primary' : ''"
              size="small"
              style="width: 100%"
              @click="onChangeStartType('precision')"
              >具体时间</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button
              :type="startType === 'past' ? 'primary' : ''"
              size="small"
              style="width: 100%"
              @click="onChangeStartType('past')"
              >过去 N 天</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div>
        <template v-if="startType === 'past'">
          <div class="relative-input-wrap">
            <el-input-number
              v-model="startInputValue"
              :controls="false"
              :min="0"
              style="width: 100%"
              @blur="onStartRelativeValueBlur"
            ></el-input-number>
          </div>
        </template>
        <template v-if="startType === 'precision'">
          <picker-panel ref="startPickerPanelRef"></picker-panel>
        </template>
      </div>
    </div>
    <div class="right">
      <div class="header-title">结束日期</div>
      <div class="header-btns">
        <el-row :gutter="8">
          <el-col :span="8">
            <el-button
              :type="endType === 'today' ? 'primary' : ''"
              size="small"
              style="width: 100%"
              @click="onChangeEndType('today')"
              >今日</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button
              :type="endType === 'future' ? 'primary' : ''"
              size="small"
              style="width: 100%"
              @click="onChangeEndType('future')"
              >未来 N 天</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button
              :type="endType === 'past' ? 'primary' : ''"
              size="small"
              style="width: 100%"
              @click="onChangeEndType('past')"
              >过去 N 天</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div>
        <template v-if="endType === 'past' || endType === 'future'">
          <div class="relative-input-wrap">
            <el-input-number
              v-model="endInputValue"
              :controls="false"
              :min="0"
              style="width: 100%"
              @blur="onEndRelativeValueBlur"
            ></el-input-number>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { isNumber, isObject, isString, isArray } from 'lodash-es'
import dayjs from 'dayjs'
import PickerPanel from './picker-panel.vue'

const props = defineProps(['initDate'])

const startPickerPanelRef = ref(null)
const startType = ref('past')
const endType = ref('today')
const startInputValue = ref(0)
const endInputValue = ref(0)

const onChangeStartType = (type) => {
  startType.value = type
}

const onChangeEndType = (type) => {
  endType.value = type
  endInpultValueLimitation()
}

const onStartRelativeValueBlur = () => {
  if (!isNumber(startInputValue.value)) {
    startInputValue.value = 0
  }
}

const endInpultValueLimitation = () => {
  if (
    startType.value === endType.value &&
    endInputValue.value > startInputValue.value
  ) {
    endInputValue.value = startInputValue.value
  }
}

const onEndRelativeValueBlur = () => {
  if (!isNumber(endInputValue.value)) {
    endInputValue.value = 0
  }
  endInpultValueLimitation()
}

const setValue = (val) => {
  startInputValue.value = val
}

const getValue = () => {
  let startVal = null
  let endVal = null
  if (startType.value === 'precision') {
    startVal =
      startPickerPanelRef.value &&
      startPickerPanelRef.value.getValue().format('YYYY-MM-DD')
  } else {
    startVal = {
      type: 'dynamic',
      offset: startInputValue.value === 0 ? 0 : -startInputValue.value,
    }
  }
  switch (endType.value) {
    case 'today':
      endVal = {
        type: 'dynamic',
        offset: 0,
      }
      break
    case 'future':
      endVal = {
        type: 'dynamic',
        offset: endInputValue.value,
      }
      break
    case 'past':
      endVal = {
        type: 'dynamic',
        offset: endInputValue.value === 0 ? 0 : -endInputValue.value,
      }
      break
    default:
      break
  }
  return [startVal, endVal]
}

const setWeek = () => {
  const weekFirstDay = dayjs().startOf('week')
  if (startType.value === 'precision') {
    startPickerPanelRef.value &&
      startPickerPanelRef.value.setValue(weekFirstDay)
  }
}

const initState = () => {
  if (!props.initDate || !isArray(props.initDate)) return
  console.log('执行：initState ', props.initDate)
  const [start, end] = props.initDate
  if (isString(start) && dayjs(start, 'YYYY-MM-DD', true).isValid()) {
    startType.value = 'precision'
    nextTick(() => {
      startPickerPanelRef.value &&
        startPickerPanelRef.value.setValue(dayjs(start))
    })
  }
  if (isObject(start)) {
    startType.value = 'past'
    const offset = start.offset && start.offset === 0 ? 0 : start.offset
    startInputValue.value = offset > 0 ? 0 : -offset
  }
  if (isObject(end)) {
    const offset = end.offset && end.offset === 0 ? 0 : end.offset
    if (offset === 0) {
      endType.value = 'today'
    } else if (offset > 0) {
      endType.value = 'future'
      endInputValue.value = offset
    } else {
      endType.value = 'past'
      endInputValue.value = -offset
    }
  }
}

const selectPastNDays = (days) => {
  startType.value = 'past'
  startInputValue.value = days
  endType.value = 'today'
  endInputValue.value = 0
}

onMounted(() => {
  initState()
})

watch(
  () => props.initDate,
  () => {
    initState()
  },
  {
    once: true,
  }
)

defineExpose({
  selectPastNDays,
  setWeek,
  setValue,
  getValue,
})
</script>

<style scoped>
.dynamic-range-panel {
  display: flex;
  height: 100%;
}
.left {
  border-right: 1px solid #ebeef5;
  height: 100%;
  min-width: 300px;
}
.right {
  min-width: 300px;
}
.header-title {
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
}
.header-btns {
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}
.relative-input-wrap {
  padding: 0 16px 16px 16px;
}
</style>
